<template>
	<view>
		<view class="cu-form-group" @tap="onTap">
			<view v-if="iconClass||label" class="title" :style="{'width':labelWidth,'text-align':labelAlign}">
				<text v-if="required" class="text-red " style="padding-right: 4rpx;" :style="{'font-size':fontSize}">*</text>
				<text v-if="iconClass" :class="iconClass?iconClass:''" style="padding-right: 6rpx;" :style="{'font-size':fontSize}"></text>
				<text v-if="label" :style="{'font-size':fontSize}">{{ label }}</text>
			</view>
			<view class="flex-sub" :class="'text-'+inputAlign" :style="{'padding-right':!rightIconClass&&!rightButtonFlag?'5rpx':'0'}">
				<text :style="{'font-size':fontSize}">{{value}}</text>
			</view>
			<text style="padding-left: 20rpx;" :style="{'font-size':fontSize}" v-if="rightIconClass&&!rightButtonFlag" :class="rightIconClass?rightIconClass:''" @click="rightIconClassClick"></text>	
			<button v-if="rightButtonFlag&&!rightButton.textFlag" class="cu-btn shadow " type="" :disabled="rightButton.disabled" :class="rightButton.bg" :style="{'font-size':fontSize}" @click="rightButtonClick" >{{rightButton.text}}</button>
			<text style="padding: 0 5rpx 0 20rpx;" v-if="rightButtonFlag&&rightButton.textFlag" :style="{'font-size':fontSize,'color':rightButton.color}" :class="rightButton.bg" @click="rightButtonClick">{{rightButton.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"zh-text",
		props: {
			iconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightIconClass: {
				type:[Array, String],
				default(){
					return ''
				}
			},
			rightButtonFlag:{
				type: Boolean,
				default: false
			},
			rightButton: {
				type: Object,
				default:null,
			},
			required: Boolean,
			label:String,
			placeholder: String,
			type: {
				type: String,
				default: 'text'
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 文本域是否自动增高
			autoHeight: {
				type: Boolean,
				default: true
			},
			// 左边标题的宽度单位rpx
			labelWidth: {
				type: [Number, String],
				default: 'auto'
			},
			// 标题对齐方式，left|center|right
			labelAlign: {
				type: String,
				default: 'right'
			},
			justifyContent:{
				type:String,
				default:"space-between"
			},
			// 输入框对齐方式
			inputAlign: {
				type: String,
				default: 'left'
			},
			maxlength: {
				type: [Number, String],
				default: -1
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			value: {
				type: String,
				default: ''
			},
			focus: Boolean,
			fixed: Boolean
		},
		data() {
			return {
				
			}
		},
		methods: {
			rightIconClassClick() {
				if(this.password){
					 this.showPassword = !this.showPassword;
				}else{
					this.$emit('right-icon-click');
					this.$emit('click');
				}
				
			},
			rightButtonClick() {
				this.$emit('right-button-click');
			},
			onTap() {
				this.$emit('textTap');
			}
		}
	}
</script>

<style lang="scss">
	.input-placeholder-class {
		color: $uni-text-color-placeholder;
	}
</style>
